import React from "react";
import { Progress, Tooltip } from "antd";
import styleModule from "@/style/progress.module.scss"
import { useRef } from "react";
// API说明：
// strokeColor: "",//进度条颜色
// trailColor: "",//未完成段的颜色
const Eprogress = ({ showInfo = true, hideHeader, size, height, style = { width: 70 }, strokeLinecap, strokeWidth = 10, state = 78, statVal,
    tooltips = true,//tooltips默认显示
    toFixed = false,//是否显示保留2位小数
    fieldNames = { name: "", nameAll: false, value: "" },//提示条后面要加的内容
    unit = null,//单位
    type = "circle", title = "环形图", strokeColor, trailColor }) => {
    const chartRef = useRef(null)
    return (
        <>
            <div className={styleModule.card} style={{ height: height }}>
                {
                    hideHeader ? null : <div className={styleModule.cardHeader}>
                        <span className={styleModule.cardHeader_title}>
                            {title}
                        </span>
                    </div>
                }

                <div ref={chartRef} className={styleModule.cardCenter}>
                    {
                        tooltips ?
                            <Tooltip title={`${fieldNames.nameAll ? fieldNames.name : (title + fieldNames.name)}：${toFixed ? Number(statVal).toFixed(2) : statVal}${fieldNames.value}`}>
                                <Progress
                                    showInfo={showInfo}
                                    trailColor={trailColor || undefined}
                                    strokeColor={strokeColor || undefined}
                                    size={size || undefined}
                                    width={style.width}
                                    strokeLinecap={strokeLinecap}
                                    strokeWidth={strokeWidth}
                                    type={type || undefined}
                                    percent={state}
                                    format={(percent) => `
                        ${percent}%
                        `}
                                />
                            </Tooltip>
                            :
                            <Progress
                                showInfo={showInfo}
                                trailColor={trailColor || undefined}
                                strokeColor={strokeColor || undefined}
                                size={size || undefined}
                                width={style.width}
                                strokeLinecap={strokeLinecap}
                                strokeWidth={strokeWidth}
                                type={type || undefined}
                                percent={state}
                                format={(percent) => `
                        ${percent}%
                        `}
                            />
                    }


                </div>
            </div >
        </>
    )
}
export default Eprogress;